<template>
  <div class="pc-checkbox-panel">
    <div class="component-content">
      <el-row>
        <el-checkbox-group @change="provinceChange" v-model="provinceCode">
          <el-col :span="6" v-for="province in pcData" :key="province.code">
            <el-checkbox :label="province.code" :indeterminate="province.indeterminate" style="margin-bottom:15px;"
              @click.native.stop="stopCheck" @change="checked => setCityChecked(checked, province)">
              {{ province.name }}
            </el-checkbox>
            <el-popover placement="bottom" width="400" trigger="click">
              <el-checkbox-group @change="checked => cityChange(checked, province)" v-model="cityCodeList">
                <el-row>
                  <el-col :span="12" v-for="city in province.children" :key="city.code">
                    <el-checkbox style="margin-bottom:10px;" :label="city.code">
                      <span>{{ city.name }}</span>
                    </el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
              <i class="el-icon-caret-bottom" style="color:#1890FF; font-size:16px; cursor:pointer;"
                slot="reference"></i>
            </el-popover>
          </el-col>
        </el-checkbox-group>
      </el-row>
    </div>
    <div class="data-content">
      <p>完整data</p>
      <el-input v-model="dataStr" type="textarea" disabled></el-input>
      <p>省code集合：</p>
      <el-input v-model="provinceCodeListStr" type="textarea" disabled></el-input>
      <p>城市code集合：</p>
      <el-input v-model="cityCodeListStr" type="textarea" disabled></el-input>
      <p>城市名字集合（用于反显）：</p>
      <el-input v-model="cityNameListStr" type="textarea" disabled></el-input>
    </div>
  </div>
</template>

<script>
import { pcData } from '@/lib/pc-code.js'
export default {
  name: 'PcCheckboxPanel',
  props: {

  },
  data() {
    const addAttr = (arr) => {
      arr.forEach(item => {
        item['indeterminate'] = false
      })
      return arr
    }
    return {
      pcData: addAttr(pcData),
      provinceList: [],
      provinceCode: [],
      cityCodeList: []
    }
  },
  computed: {
    cityNameListStr() {
      let arr = this.cityCodeList.map(item => {
        return this.getCityName(item)
      })
      return '[' + arr.join(', ') + ']'
    },
    cityCodeListStr() {
      return '[' + this.cityCodeList.join(', ') + ']'
    },
    provinceCodeListStr() {
      return '[' + this.provinceCode.join(', ') + ']'
    },
    dataStr() {
      let arr = pcData.filter(item => {
        if (this.provinceCode.includes(item.code)) {
          let _item = { ...item }
          _item = item.children.filter(item2 => {
            return this.cityCodeList.includes(item2.code)
          })
          return _item
        }
      })
      return JSON.stringify(arr, null, 2)
    }
  },
  methods: {
    provinceChange() {
      console.log(this.provinceList)
    },
    cityChange(val, province) {
      province.indeterminate = val.length > 0 && val.length < province.children.length
      if (val.length === 0) {
        this.provinceCode = this.provinceCode.filter(item => {
          return item !== province.code
        })
      } else if (val.length > 0 && val.length <= province.children.length) {
        if (this.provinceCode.indexOf(province.code) === -1) {
          this.provinceCode.push(province.code)
        }
      }
    },
    setCityChecked(val, province) {
      if (val) {
        if (province.children && province.children.length > 0) {
          province.children.forEach(item => {
            this.cityCodeList.push(item.code)
          })
        }
      } else {
        province.children.forEach(item => {
          this.cityCodeList = this.cityCodeList.filter(item2 => {
            return item2 !== item.code
          })
        })
      }
    },
    stopCheck() {
      // console.log(val)
    },
    getCityName(code) {
      for (let i = 0; i < this.pcData.length; i++) {
        if (pcData[i].children && pcData[i].children.length > 0) {
          for (let j = 0; j < pcData[i].children.length; j++) {
            if (pcData[i].children[j].code === code) {
              return pcData[i].children[j].name
            }
          }
        }
      }
    }
  }
}
</script>


<style scoped>
.pc-checkbox-panel {
  display: flex;
  justify-content: space-around;
}

.component-content,
.data-content {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.component-content {
  width: 600px;
  height: 300px;
}

.data-content {
  width: 400px;
}

.el-col {
  display: flex;
}

p {
  text-align: left;
}
</style>